import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.config.productionTip = false
Vue.use(Vuex)  // 完成Vuex的全局注册 实际上是调用了 Vuex里面的一个install方法
// 实例化Vuex的store
const store = new Vuex.Store({
  // 存放数据的位置
  state: {
    count: 0,
    list: [1,2,3,4,5,6,7,8,9,10]
  },
  // 对象 => 存放的是修改state的方法
  mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state, payload) {
      state.count += payload
    }
  },
  // actions 也是一个对象，存放的也是方法，异步和同步均可以编写
  actions: {
    // 第一个参数 context => this.$store  => 运行的store实例
    // 可以给action方法传值
    getAsyncCount (context, params) {
      setTimeout(function(){
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', params)
      }, 1000)
    }
  },
  // 对象 里面处理一些 需要二次处理的state状态
  // 函数方法
  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5),
     token: state => state.user.token,  // 用一个总的getters向外暴露了子模块的属性
     name: state => state.setting.name // 用一个总的getters向外暴露了子模块的属性
  }, 
  // 模块 => 子模块  => 对象
  modules: {
     user: {
       namespaced: true, // 保证自己的独立空间
       state: {
         token: 12345
       },
       mutations: {
        //  此时的state 指的是当前模块的state
        // 默认情况下 这个mutaions是挂在全局了
         updateToken(state){
            state.token = 678910
         }
       }
     },
     setting: {
       state: {
         name: 'Vuex实例'
       }
     }
  }
})  // 实例化Vuex的store 实际上所有的 state actions mutations 存于store
new Vue({
  render: h => h(App),
  store // 属性名和变量名一个的时候 
}).$mount('#app')
